<script setup>
import { ref } from "vue";
import { getAnncmtDetails } from "@/api/anncmt";
import { formatTime } from "@/utils/format";
const visibleDrawer = ref(false);

//记录公告信息
const anncmt = ref({});

// 获取公告信息
const handleOpen = async (id) => {
  visibleDrawer.value = true;
  const res = await getAnncmtDetails(id);
  anncmt.value = res.data.data;
};

// 暴露方法
defineExpose({
  handleOpen,
});
</script>

<template>
  <!-- 抽屉 -->
  <el-drawer
    v-model="visibleDrawer"
    title="公告预览"
    direction="rtl"
    size="50%"
  >
    <el-card style="width: 100%; min-height: 80vh">
      <template #header>
        <div class="card-header">
          <!-- 公告标题 -->
          <h3 class="article-title">{{ anncmt.title }}</h3>
          <!-- 发布人信息（副标题，靠右显示） -->
          <div class="publish-info">
            <span>发布时间：{{ formatTime(anncmt.publishTime) }}</span>
            <span>阅读人数:{{ anncmt.readCount }}</span>
            <span v-if="anncmt.isTop">
              <el-tag type="success"> 置顶 </el-tag>
            </span>
          </div>
        </div>
      </template>
      <div class="article-content" v-html="anncmt.content"></div>
    </el-card>
  </el-drawer>
</template>

<style scoped>
.publish-info {
  display: flex;
  align-items: center;
  flex-wrap: wrap; /* 适配小屏幕，避免内容溢出 */
  gap: 16px; /* 信息项之间的间距 */
  padding: 8px 0; /* 上下内边距，增加区域感 */
  color: #666; /* 文字颜色：浅灰色，区分主内容 */
  font-size: 14px; /* 小号字体，符合辅助信息定位 */
}

/* 为信息项添加左侧图标（可选，增强识别性） */
.publish-info span:first-child::before {
  content: "📅"; /* 日历图标 */
  margin-right: 6px;
}

.publish-info span:nth-child(2)::before {
  content: "👁️"; /* 眼睛图标 */
  margin-right: 6px;
}

/* 信息项之间添加分隔线（最后一项除外） */
.publish-info span:not(:last-child) {
  position: relative;
  padding-right: 18px; /* 给分隔线预留空间 */
}

.publish-info span:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 14px;
  background-color: #ddd; /* 浅灰色分隔线，不刺眼 */
}

/* 置顶标签与文字对齐优化 */
.publish-info span:has(el-tag) {
  display: flex;
  align-items: center;
}

/* 鼠标悬停时信息项微亮效果 */
.publish-info span {
  transition: color 0.2s;
}

.publish-info span:hover {
  color: #409eff; /* 与Element Plus主题色呼应 */
}
</style>
